<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="审批人" prop="exaName">
        <el-input
          v-model="queryParams.exaName"
          placeholder="请输入审批人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审批时间" prop="exaTime">
        <el-date-picker clearable size="small"
          v-model="queryParams.exaTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择审批时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="审批状态" prop="exaState">
        <el-select v-model="queryParams.exaState" placeholder="请选择" clearable size="small">
          <el-option
            v-for="dict in exaStateOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 审批统计图表 -->
    <h3>审批统计</h3>
    <div id="myChart" :style="{width: '100%', height: '500px'}"></div>
  </div>
</template>

<script>
import {
  listExamine
} from "@/api/system/examinechart";

export default {
  name: "ExamineChart",
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 审批表格数据
      examineList: [],
      // 审批状态字典选项
      exaStateOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 1000, // 获取足够多的数据用于图表展示
        exaName: null,
        exaTime: null,
        exaState: null
      },
      // 图表数据
      chartData: []
    };
  },
  created() {
    this.getList();
    this.getDicts("sys_loa_status").then(response => {
      this.exaStateOptions = response.data;
    });
  },
  methods: {
    /** 查询审批列表 */
    getList() {
      this.loading = true;
      listExamine(this.queryParams).then(response => {
        this.examineList = response.rows || [];
        this.processData();
        this.drawChart();
      }).finally(() => {
        this.loading = false;
      });
    },
    
    /** 处理数据 */
    processData() {
      // 统计各状态审批数量
      const stateCount = {};
      
      // 初始化所有状态计数为0
      this.exaStateOptions.forEach(option => {
        stateCount[option.dictLabel] = 0;
      });
      
      // 统计各状态数量
      this.examineList.forEach(item => {
        const stateLabel = this.getLabelByValue(item.exaState);
        if (stateLabel) {
          stateCount[stateLabel] = (stateCount[stateLabel] || 0) + 1;
        }
      });
      
      // 转换为图表需要的格式
      this.chartData = Object.keys(stateCount).map(key => {
        return {
          name: key,
          value: stateCount[key]
        };
      });
    },
    
    /** 根据状态值获取标签 */
    getLabelByValue(value) {
      const option = this.exaStateOptions.find(item => item.dictValue === String(value));
      return option ? option.dictLabel : null;
    },
    
    /** 绘制图表 */
    drawChart() {
      // 确保DOM已更新
      this.$nextTick(() => {
        const chartDom = document.getElementById('myChart');
        if (!chartDom) return;
        
        const myChart = this.$echarts.init(chartDom);
        
        // 图表配置
        const option = {
          title: {
            text: '审批结果统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '审批状态',
              type: 'pie',
              radius: '50%',
              data: this.chartData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        
        // 设置图表配置
        myChart.setOption(option);
        
        // 窗口大小改变时重置图表大小
        window.addEventListener('resize', () => {
          myChart.resize();
        });
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    }
  }
};
</script>

<style scoped>
.app-container {
  background: #fff;
  padding: 20px;
}
</style>